// 消息提示
<template>
<p>当用户进行操作时会被触发，该对话框中断用户操作，直到用户确认知晓后才可关闭。</p>
<p>调用 <code>ElMessageBox.alert</code> 方法以打开 alert 框。 它模拟了系统的 <code>alert</code>，无法通过按下 ESC 或点击框外关闭。 此例中接收了两个参数，<code>message</code>和<code>title</code>。 值得一提的是，窗口被关闭后，它默认会返回一个<code>Promise</code>对象便于进行后续操作的处理。 若不确定浏览器是否支持<code>Promise</code>，可自行引入第三方 polyfill 或像本例一样使用回调进行后续处理。</p>
  <el-button plain @click="open">Click to open the Message Box</el-button>
</template>

<script lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import type { Action } from 'element-plus'

const open = () => {
  ElMessageBox.alert('This is a message', 'Title', {
    // if you want to disable its autofocus
    // autofocus: false,
    confirmButtonText: 'OK',
    callback: (action: Action) => {
      ElMessage({
        type: 'info',
        message: `action: ${action}`,
      })
    },
  })
}
</script>

<style scoped>
@import '../../assets/elementPlusDemo.css'
</style>